<template>
    <!-- 顶部tab栏，layout -->
    <div class="maxBox">
        <!-- 头部导航栏 -->
        <div class="top-menu">
            <div class="left-logo">
                <img src="@/assets/logo@2x.png" alt="" title="重庆大学">
            </div>
            <div class="right-menu">
                <div class="menu-item">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router
                        background-color="#004198" text-color="#fff" active-text-color="#fff" @select="handleSelect">
                        <el-menu-item index="/home-page">
                            <template #title>
                                <span>网站首页</span>
                            </template>
                        </el-menu-item>

                        <router-link to="/center-overview">
                            <el-submenu index="/center-overview">
                                <template #title>
                                    <span>中心概况</span>
                                </template>
                                <el-menu-item index="/introduction-center">
                                    <template>
                                        <span>中心简介</span>
                                    </template>
                                </el-menu-item>
                                <el-menu-item index="/teachers-team">
                                    <template>
                                        <span>师资团队</span>
                                    </template>
                                </el-menu-item>
                                <el-menu-item index="application-materials">
                                    <template>
                                        <span>申报材料</span>
                                    </template>
                                </el-menu-item>
                                <el-menu-item index="innovation-development">
                                    <template>
                                        <span>创新与发展</span>
                                    </template>
                                </el-menu-item>
                            </el-submenu>
                        </router-link>

                        <el-menu-item index="/central-dynamics">
                            <template #title>
                                <span>中心动态</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/management-system">
                            <template #title>
                                <span>管理体系</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/teaching-research">
                            <template #title>
                                <span>教学科研</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="online-learning">
                            <template #title>
                                <span>在线学习</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="online-message">
                            <template #title>
                                <span>在线留言</span>
                            </template>
                        </el-menu-item>
                    </el-menu>
                </div>

                <!-- 右边登录 搜索 -->
                <div class="loginBox">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <i class="el-icon-user"></i> 登录
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="studentManagement">学情管理</el-dropdown-item>
                            <el-dropdown-item @click.native="outLogin">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span class="division">ㅣ</span>
                    <span class="el-dropdown-link" @click="StudentManagement">
                        <i class="el-icon-search"></i> 搜索
                    </span>
                </div>
            </div>
        </div>

        <!-- 主体内容区域 -->
        <div class="main-content">
            <router-view></router-view>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            activeIndex: '/',
        }
    },

    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        // 学情管理按钮
        studentManagement() {
            alert('学情管理')
            // this.$router.push('/')
        },
        // 退出登录按钮
        outLogin() {
            alert('退出登录')
        }
    },

}
</script>

<style lang="less" scoped>
.maxBox {
    width: 100%;
    height: 100vh;
}

.top-menu {
    display: flex;
    width: 100%;
    height: 5.628rem;
    background: #004198;
}

.left-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25.628rem;
    height: 100%;
}

.left-logo img {
    width: 9.375rem;
    margin: 21px 0 21px 120px;
}

.el-header {
    padding: 0;
}

.el-menu {
    background: none;
}

.el-menu--horizontal>.el-menu-item {
    color: #fff;
    border-bottom: none;
}

/deep/ .el-menu--horizontal>.el-submenu .el-submenu__title {
    height: 5.625rem;
    line-height: 5.625rem;
    border-bottom: none;
}

/deep/.el-submenu__title {
    height: 5.65rem;
    width: 9.9375rem;
    line-height: 5.65rem;
}

a {
    text-decoration: none;
}

.right-menu {
    flex: 1;
    display: flex;
    justify-content: space-between;
    margin-right: 78px;
}

.loginBox {
    width: 12.5rem;
    height: 5.628rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.el-dropdown-link {
    color: #fff;
    cursor: pointer;
}

.division {
    color: #fff;
}

.menu-item {
    width: 65.625rem;
    height: 5.628rem;
    margin-left: 3.4375rem;

    ul {
        display: flex;
        justify-content: space-around;
        margin: 0;

        li {
            height: 5.628rem;
            line-height: 5.628rem;
            width: 100%;
            text-align: center;
            list-style: none;
            cursor: pointer;
        }
    }
}

.el-menu.el-menu--horizontal {
    border-bottom: none;
}

/deep/ .el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: none;
}
</style>